<template>
  <div class="content">
    <div class="contentBox">
      <div class="topBox" ref="topContent">
        <div class="title">
          <div class="left_t">智能质检结果</div>
          <div class="right_t">
            <t-dropdown class="batch export" trigger="click" @click="clickExport">
              <t-space>
                <t-button :disabled="tableState.tableData.length === 0">
                  <span class="name">导出本页</span>
                  <svg-icon
                      :name="'icon-batchDown'"
                      class-name="batch-svg-icon"
                  ></svg-icon>
                </t-button>
              </t-space>
              <t-dropdown-menu>
                <t-dropdown-item class="batchItem" :value="0" :disabled="hasPermission('result:export')">导出全部</t-dropdown-item>
<!--                <t-dropdown-item :value="0" :disabled="tableState.tableData.length === 0">导出全部</t-dropdown-item>-->
              </t-dropdown-menu>
            </t-dropdown>

            <t-dropdown class="batch download" trigger="click" @click="onClickAudio">
              <t-space>
                <t-button :disabled="tableState.tableData.length === 0">
                  <span class="name">下载录音</span>
                  <svg-icon
                      :name="'icon-batchDown'"
                      class-name="batch-svg-icon"
                  ></svg-icon>
                </t-button>
              </t-space>
              <t-dropdown-menu>
                <t-dropdown-item class="batchItem" :value="1" :disabled="selectedRowKeys && selectedRowKeys.length === 0 || hasPermission('result:download')">下载勾选</t-dropdown-item>
                <t-dropdown-item class="batchItem" :value="0" :disabled="tableState.tableData.length === 0 || hasPermission('result:download')">下载全部</t-dropdown-item>
              </t-dropdown-menu>
            </t-dropdown>

            <t-dropdown class="batch repeat" trigger="click" @click="clickQuality">
              <t-space>
                <t-button :disabled="tableState.tableData.length === 0">
                  <span class="name">重新质检</span>
                  <svg-icon
                      :name="'icon-batchDown'"
                      class-name="batch-svg-icon"
                  ></svg-icon>
                </t-button>
              </t-space>
              <t-dropdown-menu>
                <t-dropdown-item class="batchItem" :value="2" :disabled="selectedRowKeys && selectedRowKeys.length === 0 || hasPermission('result:reload')">质检勾选</t-dropdown-item>
                <t-dropdown-item class="batchItem" :value="0" :disabled="tableState.tableData.length === 0|| hasPermission('result:reload')">质检全部</t-dropdown-item>
              </t-dropdown-menu>
            </t-dropdown>
          </div>
        </div>
        <div class="line"></div>
        <div class="formBox">
          <t-form
              v-show="!isFold"
              ref="form"
              :data="formData"
              :layout="'inline'"
              scroll-to-first-error="smooth"
              :class="isFold ? '' : 'paddingBottom'"
          >
            <t-form-item class="formDate" style="width: 50%">
              <t-space size="small" style="gap: 10px;">
                <div class="timeType">
                  <span class="timeCheck" @click="timeClick('today')">今天</span>
                  <span class="timeCheck" @click="timeClick('yesterday')">昨天</span>
                  <span class="timeCheck" @click="timeClick('oneMonth')">一月</span>
                  <span>时间</span>
                </div>
                <t-date-picker
                    enable-time-picker
                    allow-input
                    clearable
                    v-model="formData.startTime"
                    :defaultTime="['00:00:00']"
                    valueType="YYYY-MM-DD HH:mm:ss"
                    placeholder="选择开始时间"
                    :disable-date="(date) => setDateStart(formData.endTime, date)"
                />
                <t-date-picker
                    enable-time-picker
                    allow-input
                    clearable
                    :separator="'/'"
                    v-model="formData.endTime"
                    :defaultTime="['23:59:59']"
                    valueType="YYYY-MM-DD HH:mm:ss"
                    placeholder="选择结束时间"
                    :disable-date="(date) => setDateEnd(formData.startTime, date)"
                />
              </t-space>
            </t-form-item>

            <t-form-item label="选择平台" name="platform" :label-width="68" requiredMark>
              <t-select v-model="formData1.platform" @change="onPlatformChange" placeholder="请选择所属平台">
                <t-option key="0" label="CC-1.0" :value="0" />
                <t-option key="1" label="TNCS" :value="1" />
                <t-option key="2" label="CC-2.0" :value="2" />
              </t-select>
            </t-form-item>

            <t-form-item label="所属企业" name="company" requiredMark :label-width="68" v-if="formData1.platform !== 1">
              <t-select v-model="formData1.company" :filter="filterMethod" @change="onCompanyChange" placeholder="请选择所属企业">
                <t-option v-for="item in companyOptions" :key="item.id" :label="item.agencyName" :value="item.agencyId" />
              </t-select>
            </t-form-item>

            <t-form-item label="所属机构" name="org" requiredMark :label-width="68" v-if="formData1.platform !== 1">
              <t-select v-model="formData1.org" :filter="filterMethod" @change="onOrgChange" placeholder="请选择所属机构">
                <t-option v-for="item in orgOptions" :key="item.id" :label="item.agencyName" :value="item.agencyId" />
              </t-select>
            </t-form-item>

            <!--          TNCs 机构-->
            <t-form-item label="所属机构" name="org" :label-width="68" requiredMark v-if="formData1.platform === 1">
              <t-select v-model="formData1.org" :filter="filterMethod" @change="onOrgChange" placeholder="请选择所属机构">
                <!--              <t-option key="" label="全部" value=""></t-option>-->
                <t-option v-for="item in orgOptions" :key="item.id" :label="item.projectName" :value="item.id" />
              </t-select>
            </t-form-item>

            <t-form-item label="所属部门" name="branch" requiredMark :label-width="68" v-if="formData1.platform !== 1">
              <t-select v-model="formData1.branch" :filter="filterMethod" @change="onBranchChange" placeholder="请选择所属部门">
                <t-option v-for="item in branchOptions" :key="item.id" :label="item.agencyName" :value="item.agencyId"  />
              </t-select>
            </t-form-item>

            <t-form-item label="通话时长" name="" :label-width="58" class="c_range">
              <t-range-input :onBlur="onRangeBlur" :onChange="onRangeChange" v-model="inputValue"/>
              <span class="secondLabel" :class="formData1.platform === 1 ? 'shortLabel' : ''">秒</span>
            </t-form-item>

            <t-form-item label="通话座席" :class="formData1.platform === 1 ? '' : 'normalForm'" name="agentId" :label-width="58" v-if="formData1.platform !== 1">
              <t-select
                  class="c_tool"
                  v-model="formData.agentId"
                  :popupVisible="popupVisible"
                  @click.stop="onPopupShow"
                  placeholder="请选择通话座席"
                  multiple
                  :min-collapsed-num="3">
                <t-option v-for="item in seatsOptions" :key="item.agentid" :value="item.agentid" :label="item.agentname">
                  <div>
                    <div>
                      <div>{{ item.agentname }} ({{item.agentid}})</div>
                    </div>
                  </div>
                </t-option>
                <template #panelBottomContent v-if="seatsOptions && seatsOptions.length > 0 ">
                  <div class="select-panel-footer">
                    <div class="line"></div>
                    <div class="boxFlex">
                      <div class="left">
                        <t-checkbox :checked="checkAll" :indeterminate="indeterminate" :on-change="handleSelectAll">全选</t-checkbox>
                      </div>
                      <div class="right" @click="onPopupShow">
                        确定
                      </div>
                    </div>
                  </div>
                </template>
              </t-select>
            </t-form-item>

            <t-form-item label="呼叫类型" name="callType" :label-width="58">
              <t-select v-model="formData.callType" placeholder="请选择呼叫类型">
                <t-option key="0" label="全部" :value="0" />
                <t-option key="1" label="呼入" :value="1" />
                <t-option key="2" label="呼出" :value="2" />
              </t-select>
            </t-form-item>

            <t-form-item class="phone" label="客户电话" :class="formData1.platform === 1 ? 'shortFrom' : ''" name="userNumber" :label-width="58">
              <t-input-number theme="normal" v-model="formData.userNumber" placeholder="请输入客户电话"></t-input-number>
            </t-form-item>

            <t-form-item label="转写状态" :class="formData1.platform === 1 ? 'normalForm' : ''" name="status" :label-width="58">
              <t-select v-model="formData.status" placeholder="请选择转写状态">
                <t-option key="0" label="转写成功" :value="0" />
                <t-option key="1" label="转写失败" :value="1" />
              </t-select>
            </t-form-item>

            <t-form-item class="formHandleBox" v-if="!isFold">
              <t-space size="small" style="gap: 10px;">
                <t-button class="queryBtn hoverBlue" @click="handleQuery(1)" v-permission="['result:list']">查询</t-button>
                <t-button class="resetBtn hoverLightBlue" @click="reset">重置</t-button>
                <span class="arrowCont">
                 <svg-icon
                     @click="handleArrow"
                     :name="'icon-arrowTD'"
                     class-name="arrowTD-svg-icon"
                     :style="isFold === true ? '' : 'transform: rotate(180deg)'"
                 ></svg-icon>
              </span>
              </t-space>
            </t-form-item>
          </t-form>
          <!--      展开-->
          <div class="upArrow" v-show="isFold">
            <svg-icon
                @click="handleArrow"
                :name="'icon-arrowTD'"
                class-name="arrowTD-svg-icon"
                :style="isFold === true ? '' : 'transform: rotate(180deg)'"
            ></svg-icon>
          </div>
        </div>
      </div>
      <div class="tableBox">
        <div style="position: relative">
          <t-table
              :height="tableHeight"
              row-key="id"
              :columns="tableState.columns"
              :data="tableState.tableData"
              :selected-row-keys="selectedRowKeys"
              @select-change="handleSelectChange"
          >
            <template #handle="{ row }">
              <span style="display: inline-block;">
                <span v-if="row.status === 4" @click="handleDetail(row)" class="detailText" v-permission="['result:info']">详情</span>
                <span v-else class="notText" v-permission="['result:info']">详情</span>
              </span>
              <span style="display: inline-block;">
                <span v-if="row.status === 4 && row.templateStatus === 0" @click="handleResetQuality(1, row)" class="resetText" v-permission="['result:reload']">重新质检</span>
                <span v-else class="notText" v-permission="['result:reload']">重新质检</span>
              </span>
            </template>
          </t-table>
          <div class="emptyBox" v-if="tableState.tableData.length === 0">
            <svg-icon
                :name="'icon-emptyTable'"
                class-name="emptyTable-svg-icon"
            ></svg-icon>
            <span>暂无数据</span>
          </div>
        </div>
      </div>

      <div class="footerBox">
        <t-pagination
            v-model="formData.pageNo"
            v-model:pageSize="formData.pageSize"
            :pageSizeOptions="[5, 20, 30, 50]"
            :total="totalNum"
            size="small"
            show-jumper
            @page-size-change="onPageSizeChange"
            @current-change="onCurrentChange"
        />
      </div>
    </div>

<!--    重新质检弹窗-->
    <ResetQualityDialog
        :resetVisible="resetVisible"
        :qualityIdList="qualityIdList"
        @closeResetDialog="closeResetDialog"
    ></ResetQualityDialog>
  </div>
</template>

<script lang="jsx" setup>
import {getCurrentInstance, reactive, ref, onMounted, computed, nextTick, watch, onUnmounted, toRaw} from "vue";
import {MessagePlugin} from "tdesign-vue-next";
import dayjs from "dayjs";
import cache from '@/utils/cache.js'
import {cc0AgencyList, cc0SeatsList, TNCsAgencyList, cc2AgencyList, cc2SeatsList} from "../../api/commonApi";
import { debounce, hasPermission } from "../../utils/tools";
import { usePageStore } from '@/pinia/page.js'
import ResetQualityDialog from './components/resetQualityDialog.vue'
import {useRouter} from "vue-router";
const store = usePageStore()
import { getTypeData, setDateStart, setDateEnd } from '@/hooks/useCheckDate.js'
import { totalNum, formData, resultList, historyQuery }  from './hooks/pageAi.js'
import {resultAllId, resultDownload, resultExport} from "../../api/qualityResult";
import templateDel from '@/assets/icons/templateDel.svg'

// import saveAs from 'file-saver';
// let FileSaver = require('file-saver');

console.log('打印看看info', JSON.parse(cache.getLocalstorage('authInfo')));

const pageInstance = getCurrentInstance()

// 时间选择事件
const timeClick = (type) => {
  formData.startTime = getTypeData(type, true).startTime
  formData.endTime = getTypeData(type, true).endTime
}

// form 表单
// const formData = reactive({
//   pageNo: 1,
//   pageSize: 10,
//   startTime: '',
//   endTime: '',
//   durationStart: undefined,
//   durationEnd: undefined,
//   callType: null,
//   userNumber: '',
//   agentId: [],
//   projectId: JSON.parse(cache.getLocalstorage('authInfo')).agencyId,
//   qualityProject: ''
// });

const formData1 = reactive({
  platform: null,
  company: '',
  org: '',
  branch:''
});

const companyOptions = ref([]) // 企业options
const orgOptions = ref([]) // 机构options
const branchOptions = ref([]) // 部门options
const seatsOptions = ref([]) // 座席options

// 选择平台事件
const onPlatformChange = (type) => {
  store.setFormCondition(type, '', '', '')
  formData1.company = ''
  companyOptions.value = []
  formData1.org = ''
  orgOptions.value = []
  formData1.branch = ''
  branchOptions.value = []
  formData.presetsRule = ''
  formData.presetsRuleOptions = []
  // handleReset()
  getCompanyList(type)
}
const getCompanyList = (type) => {
  if(type === 0) { // 企业请求 1.0 接口
    let data = {
      agencyId: JSON.parse(cache.getLocalstorage('authInfo'))['agencyId']
    }
    cc0AgencyList(data).then(res => {
      companyOptions.value = res.data
    })
  } else if(type === 1) { // 机构请求 TNCs 接口
    TNCsAgencyList().then(res => {
      orgOptions.value = res.data
    })
  } else if(type === 2) {
    let data = {
      agencyId: JSON.parse(cache.getLocalstorage('authInfo'))['agencyId']
    }
    cc2AgencyList(data).then(res => {
      companyOptions.value = res.data
    })
  }
}
// 选择企业事件
const onCompanyChange = (type) => {
  store.setFormCondition(formData1.platform, type, '', '')
  formData1.org = ''
  orgOptions.value = []
  formData1.branch = ''
  branchOptions.value = []
  // 获取机构options
  if(formData1.platform === 0) {
    getOrgList(type)
  } else if(formData1.platform === 2) {
    getOrgList2(type)
  }
}
const getOrgList = (type) => {
  let data = {
    agencyId: type
  }
  cc0AgencyList(data).then(res => {
    orgOptions.value = res.data
  })
}
const getOrgList2 = (type) => {
  let data = {
    agencyId: type
  }
  cc2AgencyList(data).then(res => {
    orgOptions.value = res.data
  })
}
// 机构选择事件
const onOrgChange = (type) => {
  store.setFormCondition(formData1.platform, formData1.company, type, '')
  formData1.branch = ''
  branchOptions.value = []
  if(formData1.platform === 0) {
    getBranchList(type)
  } else if(formData1.platform === 2) {
    getBranchList2(type)
  }
}
const getBranchList = (type) => {
  let data = {
    agencyId: type
  }
  cc0AgencyList(data).then(res => {
    branchOptions.value = res.data
  })
}
const getBranchList2 = (type) => {
  let data = {
    agencyId: type
  }
  cc2AgencyList(data).then(res => {
    branchOptions.value = res.data
  })
}
// 部门选择事件
const onBranchChange = (type) => {
  store.setFormCondition(formData1.platform, formData1.company, formData1.org, type)
  console.log('================================')
  getSeatsList(type)
}
const getSeatsList = (type) => {
  if(formData1.platform === 0) {
    cc0SeatsList(type).then(res => { // 获取 1.0 座席数据
      seatsOptions.value = res.data
    })
  } else if( formData1.platform === 2) {
    cc2SeatsList(type).then(res => { // 获取 1.0 座席数据
      seatsOptions.value = res.data
    })
  }
}
// 座席下拉事件
const popupVisible = ref(false)
const onPopupShow = () => {
  popupVisible.value = !popupVisible.value
}
// 点击弹窗外关闭下拉框
watch(() => usePageStore().clickTimeStamp, () => {
  popupVisible.value = false
})
const checkAll = computed(() => seatsOptions.value.length === formData.agentId.length);
const indeterminate = computed(() => !!(seatsOptions.value.length > formData.agentId.length && formData.agentId.length));
const handleSelectAll = (checked) => {
  // value1.value = checked ? ['选项一', '选项二', '选项三'] : [];
  if(seatsOptions.value.length > 0) {
    let ids = []
    seatsOptions.value.forEach(item => {
      ids.push(item['agentid'])
    })
    formData.agentId = checked ? ids : []
  }
};
const inputValue = ref([])
// 范围输入框事件
const onRangeChange = (value) => {
  if(value[0] !== undefined && isNaN(value[0] * 1)) {
    inputValue.value[0] = value[0].replace(/\D+/g, '')
  }
  if(value[1] !== undefined && isNaN(value[1] * 1)) {
    inputValue.value[1] = value[1].replace(/\D+/g, '')
  }

  if(value[0] && value[0].length > 1 && value[0].charAt(0) === '0') {
    value[0] = value[0].substring(1, value[0].length)
  }
  if(value[1] && value[1].length > 1 && value[1].charAt(0) === '0') {
    value[1] = value[1].substring(1, value[1].length)
  }
  formData.durationStart = value[0]
  formData.durationEnd = value[1]
}
const onRangeBlur = (value) => {
  if(value[0] !== undefined && value[1] !== undefined && value[0] * 1 > value[1] * 1) {
    MessagePlugin.info('通话时长开始大于结束')
  }
}

onMounted(() => {
  timeClick('today')
  defaultSelection()
})

// 有值默认选中
const defaultSelection = () => {
  let formState = store.quality_form_id
  if(formState.platform !== null) { // 获取企业
    getCompanyList(formState.platform)
    formData1.platform = formState.platform
  } else {
    formData1.platform = 0
    onPlatformChange(0)
  }
  if(formState.company) { // 获取机构
    if(formState.platform === 0) {
      getOrgList(formState.company)
    } else if(formState.platform === 2) {
      getOrgList2(formState.company)
    }
    formData1.company = formState.company
  }
  if(formState.org) { // 获取部门
    if(formState.platform === 0) {
      getBranchList(formState.org)
    } else if(formState.platform === 2) {
      getBranchList2(formState.org)
    }
    formData1.org = formState.org
  }
  if(formState.branch) {
    formData1.branch = formState.branch
    getSeatsList(formData1.branch)

    if(Object.keys(store.queryResultParams).length > 0) {
      historyQuery().then(res => {
        tableState.tableData = res
      })
    } else {
      handleQuery(1)
    }
  }
}

let isFold = ref(false)
const handleArrow = () => {
  isFold.value = !isFold.value
}

//table
const tableState = reactive({
  tableData: [],
  columns: [
    {
      colKey: 'row-select',
      type: 'multiple',
      width: 50,
      align: 'right',
      checkProps: ({ row, rowIndex }) => ({ disabled: row.status !== 4 }),
    },
    { colKey: '',title: '序号', cell:(h, { row, rowIndex }) => {
        {{
          let value = (rowIndex + (formData.pageNo - 1) * formData.pageSize + 1 >= 10
              ? rowIndex + (formData.pageNo - 1) * formData.pageSize + 1
              : "0" + (rowIndex + (formData.pageNo - 1) * formData.pageSize + 1))

          return row.status !== 4
              ? <t-tag className="c_tag">
                <span>{value}</span>
                <span className="dotRed"/>
              </t-tag>
              : <t-tag className="c_tag">
                <span>{value}</span>
              </t-tag>
        }}
      }
    },
    // { colKey: 'qiJiBu', title: '企业/机构/部门', ellipsis: true},
    { colKey: 'agentId', title: '座席编号', ellipsis: true, cell:(h, {row}) => {
        if(row.agentId === 0) {
          return ''
        } else {
          return row.agentId
        }
      }},
    { colKey: 'agentName', title: '座席姓名', minWidth: '170px' },
    { colKey: 'agentNumber', title: '座席电话', minWidth: '120px' },
    { colKey: 'agentRatio', title: '座席占比', minWidth: '120px' },
    { colKey: 'userNumber', title: '用户电话', minWidth: '120px' },
    { colKey: 'callType', title: '呼叫类型', minWidth: '120', cell:(h, {row}) => {
        if(row.callType === 0) {
          return '全部'
        } else if(row.callType === 1) {
          return '呼入'
        } else {
          return '呼出'
        }
      }
    },
    { colKey: 'duration', title: '通话时长', minWidth: '120' },
    { colKey: 'sessionRounds', title: '对话次数', minWidth: '140' },
    { colKey: 'score', title: '质检评分', minWidth: '100' },
    { colKey: 'templateName', title: '质检模板', align: 'center', cell:(h, {row}) => {
        return row.templateStatus === 1
            ? <span style="display:flex;align-items:center;justify-content:center;color:#E34D59;"><img src={templateDel} style="width:16px;height:16px;" /><span>{row.templateName}</span></span>
            : <span>{row.templateName}</span>
      }
    },
    { colKey: 'status', title: '质检状态', align: 'center', cell:(h, {row}) => {
        return row.status === 4
            ? <t-tag theme='success' variant="light-outline">
              已质检
            </t-tag>
            : <t-tag theme='warning' variant="light-outline">
              未质检
            </t-tag>
      }
    },
    { colKey: 'handle', title: '操作', align: 'center', width: 166, fixed: 'right' },
  ],
})
const selectedRowKeys = ref([])
const handleSelectChange = (value, ctx) => {
  selectedRowKeys.value = value;
};
// table 高度变化
const tableHeight = ref(0)
const getTableHeight = () => {
  nextTick(() => {
    const otherHeight = pageInstance.refs.topContent.offsetHeight
    const windowHeight = window.innerHeight
    tableHeight.value = windowHeight - otherHeight - 162
    console.log(tableHeight.value)
  })
}
watch(() => isFold.value, (newVal, oldVal) => {
  getTableHeight()
})

// window窗口 变化
const getWindowInfo = () => {
  const info = {
    width: window.innerWidth,
    height: window.innerHeight
  }
  console.log(info)
  getTableHeight()
}
const resizeInfo = debounce(getWindowInfo, 0)
onMounted(() => {
  getTableHeight()
  window.addEventListener('resize', resizeInfo);
})
onUnmounted(() => {
  window.removeEventListener('resize', resizeInfo);
})


const handleQuery = (num) => {
  if(formData1.platform === 0 || formData1.platform === 2) { // 1.0 | 2.0
    if (formData1.company === '') return MessagePlugin.error('请选择企业！')
    if (formData1.org === '') return MessagePlugin.error('请选择机构！')
    if (formData1.branch === '') return MessagePlugin.error('请选择部门！')
    if(num && num === 1) { formData.pageNo = 1 }

    formData.qualityProject = formData1.branch
    store.$patch({ queryResultParams: toRaw(formData)})
    formData.type = 0 // 智能质检
    resultList(formData).then(res => {
      tableState.tableData = res
    })
  } else if (formData1.platform === 1) { // TNCs
    if(formData1.org === '') return MessagePlugin.error('请选择机构！')
    if(num && num === 1) { formData.pageNo = 1 }

    formData.qualityProject = formData1.org
    store.$patch({ queryResultParams: toRaw(formData)})
    formData.type = 0 // 智能质检
    resultList(formData).then(res => {
      tableState.tableData = res
    })
  }
};

//重置按钮
const reset = () => {
  formData.pageNo = 1
  formData.pageSize = 10
  formData.startTime = ''
  formData.endTime = ''
  formData.durationStart = ''
  formData.durationEnd = ''
  formData.agentId = []
  formData.callType = null
  formData.userNumber = ''
  formData.status = null
  timeClick('today')
  handleQuery()
}

// 分页
const pageSize = ref(10);
// const totalNum = ref(0)
const onPageSizeChange = (size) => {
  formData.pageSize = size
  handleQuery()
};
const onCurrentChange = (index, pageInfo) => {
  formData.pageNo = index
  handleQuery()
};

// 重新质检
const resetVisible = ref(false)
const qualityIdList = ref([])
const handleResetQuality = (type, row) => {
  console.log('open', row)
  if(type === 1) { // row 质检
    qualityIdList.value = [ row.id ]
  } else if(type === 2) { // 质检勾选
    qualityIdList.value = selectedRowKeys.value
  } else { // 质检当前页面
    let ids = []
    tableState.tableData.forEach(item => {
      ids.push(item.id)
    })
    qualityIdList.value = ids
  }
  resetVisible.value = true
}
const closeResetDialog = () => {
  resetVisible.value = false
  handleQuery()
}
const clickQuality = (data) => {
  console.log('点击了',data.value);
  handleResetQuality(data.value)
}
// 下载录音
const onClickAudio = (data) => {
  console.log(data.value)
  let ary = []
  if(data.value === 0) { // 下载全部
    tableState.tableData.forEach(item => {
      ary.push(item.id)
    })
  } else { // 下载勾选
    ary = selectedRowKeys.value
  }
  resultDownload(ary).then(res => {
    console.log('下载录音',res)
    if(res.code === 0 && res.data.length > 0) {
      res.data.forEach(item => {
        const a = document.createElement("a");
        a.href = item; //给a标签上的href属性加上地址
        document.body.appendChild(a); //将a标签新增到文档对象中
        a.click(); //调点击事件
        document.body.removeChild(a); // 一次性的，用完就删除a标签
      })
    }
  })
}
// 导出
const clickExport = (data) => {
  console.log(data.value)
  if(data.value === 0) {
    let data = {
      pageNo: formData.pageNo,
      pageSize: formData.pageSize,
      startTime: formData.startTime,
      endTime: formData.endTime,
      projectId: JSON.parse(cache.getLocalstorage('authInfo'))['agencyId'],
      type: 0
    }
    data.qualityProject = formData1.platform !== 1 ? formData1.branch : formData1.org

    resultExport(data).then(res => {
      const url = URL.createObjectURL(res) //把blob对象转成一个url
      //创建一个a标签
      const a = document.createElement("a");
      a.href = url; //给a标签上的href属性加上地址
      a.download = `质检结果${new Date().getTime()}.xlsx`; //下载名称
      document.body.appendChild(a); //将a标签添加到文档对象中
      a.click(); //调点击事件
      document.body.removeChild(a); // 一次性的，用完就删除a标签
    }).catch(error => {
      console.log(error)
    })
  }
};

// 跳转详情页面
const router = useRouter()
const handleDetail = (row) => {
  console.log('详情的row',row);
  // 获取所有可点击详情的id
  formData.qualityProject = formData1.branch
  resultAllId(formData).then(res => {
    if(res.code === 0) {
      store.$patch({ allIds: res.data, currentDetailId: row.id, resultType: 0, templateStatus: row.templateStatus })
      router.push({
        path: '/qualityResult/qualityDetail',
        // query: {
        //   id: row.id,
        // }
      })
    }
  })
}

const filterMethod = (search, option) => {
  return option.label.indexOf(search) !== -1 || option.value.indexOf(search) !== -1
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #EBECED !important;
  padding: 8px;
  .contentBox {
    background-color: white;
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 4px;
  }

  .topBox {
    padding: 20px 20px 0 20px;
    //height: 57px;
    //line-height: 57px;
    opacity: 1;
    border-radius: 4px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 10px 3px rgba(240, 240, 240, 0.05);
  }

  .title {
    display: flex;
    .left_t {
      font-size: 16px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      flex: 1;
    }
    .right_t {
      margin-left: auto;
      .batch {
        height: 28px;
        width: 88px;
        .batch-svg-icon {
          height: 16px;
          width: 16px;
          display: inline-block;
          margin-left: 8px;
        }
        :deep(.t-button) {
          height: 28px;
          width: 100%;
          padding: 0 8px;
          border-radius: 3px;
          .t-button__text {
            font-size: 12px;
            font-weight: 400;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
        :deep(.t-button):hover {
          background: var(--Brand-Brand1-Light, #EDF2FD) !important;
          color: var(--Brand-Brand6-Hover, #458DFF) !important;
          //border: 1px solid var(--Brand-Brand6-Hover, #458DFF) !important;
        }
      }
      .export {
        :deep(.t-button) {
          background: rgba(236, 242, 254, 1);
          border: 0.5px solid rgba(30, 117, 254, 1);
          color: rgba(30, 117, 254, 1);
        }
      }
      .download {
        margin: 0 10px;
        :deep(.t-button) {
          background: rgba(227, 238, 255, 1);
          border: 0.5px solid rgba(9.38399999999999, 95.71679999999998, 234.6, 1);
          color: rgba(30, 117, 254, 1);
        }
      }
      .repeat {
        :deep(.t-button) {
          background: rgba(30, 117, 254, 1);
          border: none;
          color: rgba(255, 255, 255, 1);
        }
        :deep(.t-button):hover {
          background: var(--Brand-Brand6-Hover, #458DFF) !important;
          color: var(--text-icon-font-wh-190-anti, rgba(255, 255, 255, 0.90)) !important;
        }
      }
    }
  }

  .line {
    height: 0;
    opacity: 1;
    background: rgba(204, 204, 204, 1);
    border: 1px solid rgba(239, 242, 245, 1);
    margin-top: 17px;
  }
  .formBox {
    :deep(.t-form) {
      padding: 20px 0 20px 0;

      .t-form-inline {
        row-gap: 16px !important;
      }

      .c_range {
        .t-is-focused {
          border-color: rgba(30, 117, 254, 1);
        }
      }
      .t-form__item {
        width: 25%;
        height: 28px;
        margin-right: 0 !important;
        padding-right: 10px;

        .t-range-input {
          height: 28px;
          width: calc(100% - 42px);
          border-radius: 2px 0 0 2px;
        }
        .secondLabel {
          margin-right: 10px;
          box-sizing: border-box;
          display: inline-block;
          height: 28px;
          line-height: 28px;
          text-align: center;
          width: 42px;
          border-radius: 0 2px 2px 0;
          background: rgba(243, 243, 243, 1);
          border: 1px solid rgba(220, 220, 220, 1);
          border-left: none;
        }

        .t-form__label--right {
          text-align: left;
          padding-right: 0;
          font-size: 12px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.9);
        }

        .t-select__wrap {
          .t-input {
            height: 28px;
          }
          .t-select-input {
            height: 28px;
            .t-tag-input {
              height: 28px;
              .t-input {
                height: 28px;
                min-height: unset;
                .t-tag {
                  height: 20px;
                }
              }
            }
          }
        }
      }

      .phone {
        .t-input-number {
          width: 100%;
          .t-input__wrap {
            .t-input {
              height: 28px;
            }
          }
        }
      }

      .t-form__item:nth-child(3) {
        padding-right: 0;
      }
      .t-form__item:nth-child(6) {
        padding-right: 0;
      }

      .t-form__item:nth-child(1) {
        .t-form__label--right {
          display: none
        }

        .t-form__controls {
          margin-left: 0 !important;
        }

        .t-space {
          width: 100%;

          .timeCheck {
            font-size: 12px;
            font-weight: 400;
            cursor: pointer;
            color: rgba(30, 117, 254, 1);
          }
        }

        .t-space-item:nth-child(1) {
          width: 126px;
        }

        .t-space-item:nth-child(2) {
          flex: 1;
        }

        .t-space-item:nth-child(3) {
          flex: 1;
        }

        .t-date-picker {
          height: 28px;
          width: 100%;

          .t-input {
            height: 28px;
          }
        }

        .timeType {
          float: left;
          width: 126px;
          text-align: left;
          height: 28px;
          line-height: 28px;

          span {
            margin-right: 10px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.9);
          }

          span:nth-child(4) {
            margin-right: 0;
          }
        }
      }

      .formHandleBox {
        margin-left: auto;
        text-align: right;
        padding-right: 0;

        .t-space {
          margin-left: auto;
          justify-content: center;
          align-items: center;

          .queryBtn {
            border: none;
            width: 56px;
            height: 30px;
            opacity: 1;
            border-radius: 3px;
            background: rgba(30, 117, 254, 1);
            font-size: 12px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            text-align: center;
          }

          .resetBtn {
            width: 56px;
            height: 30px;
            opacity: 1;
            border-radius: 3px;
            background: rgba(236, 242, 254, 1);
            border: 0.5px solid rgba(30, 117, 254, 1);
            font-size: 12px;
            font-weight: 400;
            color: rgba(30, 117, 254, 1);
            text-align: center;
          }

          .arrowCont {
            display: flex;
            justify-content: center;
            align-items: center;

            span {
              font-size: 12px;
              font-weight: 500;
              color: rgba(138, 138, 138, 1);
            }

            .arrowTD-svg-icon {
              height: 16px;
              width: 16px;
              cursor: pointer;
            }
          }
        }

        .t-form__controls {
          margin-left: 0 !important;
        }
      }
    }

    .upArrow {
      text-align: right;
      height: 20px;

      .arrowTD-svg-icon {
        height: 16px;
        width: 16px;
        cursor: pointer;
      }
    }
  }
}

.tableBox {
  background-color: rgba(255, 255,255, 1);
  border-radius: 4px;
  :deep(.t-table__header) {
    tr {
      th {
        padding: 7px 10px;
        box-sizing: border-box;
      }
      th:nth-child(1) {
        padding-left: 30px;
        padding-right: 0;
      }
      th:nth-child(2) {
        padding-left: 4px;
      }
    }

  }
  :deep(.t-table__body) {
    tr {
      td {
        padding: 6px 10px;
        box-sizing: border-box;
      }
      td:nth-child(1) {
        padding-left: 30px;
        padding-right: 0;
      }
      td:nth-child(2) {
        padding-left: 4px;
      }
    }
  }
  :deep(.t-table__content)  {
    //background-color: red !important;
    .detailText {
      cursor: pointer;
      font-size: 13px;
      font-weight: 400;
      margin: 0 10px;
      color: #1E75FE;
    }
    .resetText {
      cursor: pointer;
      font-size: 13px;
      font-weight: 400;
      margin: 0 10px;
      color: #FF9900;
    }
    .notText {
      font-size: 13px;
      font-weight: 400;
      margin: 0 10px;
      cursor: not-allowed;
      color: rgba(122, 122, 122, 1);
    }

    .t-tag {
      margin: 0 auto;
      width: 62px;
      height: 24px;
      opacity: 1;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px 12px 5px 12px;
      font-size: 12px;
      font-weight: 400;
    }
    .t-tag--warning {
      background: rgba(235, 235, 235, 1);
      border: none ;
      color: rgba(122, 122, 122, 1);
    }
    .t-tag--success {
      background: rgba(233, 246, 242, 1);
      border: none ;
      color: rgba(0, 184, 122, 1);
    }

    .c_tag {
      //background-color: red;
      background-color: white;
      display: inline;
      position: relative;
      padding: 0;
      margin: 0;
      border: none;
      .dotRed {
        display: inline-block;
        width: 6px;
        height: 6px;
        opacity: 1;
        background: rgba(227, 77, 89, 1);
        border-radius: 6px;
        margin-left: 3px;
        position: absolute;
        right: -9px;
        top: 0;
      }
    }
  }
  .exclMark-svg-icon {
    width: 12px;
    height: 12px;
    cursor: pointer;
  }
  :deep(.custom-cell-select) {
    padding-right: 0!important;
  }
  :deep(.custom-cell-index) {
    padding-left: 0!important;
  }
}
:deep(.t-table__empty) {
  display: none;
}
.emptyBox {
  position: absolute;
  height: 116px;
  width: 69px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  .emptyTable-svg-icon {
    height: 62px;
    width: 69px;
  }
  span {
    font-size: 12px;
    font-weight: 400;
    color: rgba(92, 91, 91, 1);
  }
}

//下拉多选样式 ⬇
.c_tool {
  padding-right: 0 !important;
  position: relative;
  .c_all {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    font-weight: 400;
    color: rgb(12, 13, 14);
    padding-left: 8px;
    width: 90%;
    z-index: 100;
    //background-color: red;
  }
  :deep(.t-select__list) {
    padding-bottom: 30px !important;
  }
}
.select-panel-footer {
  position: fixed;
  bottom: -21px;
  //background-color: red;

  z-index: 100 !important;
  opacity: 1;
  width: 100%;
  //width: calc(100% - 6px);
  .line {
    height: 0;
    opacity: 1;
    border: 0.8px solid rgba(229, 229, 229, 1);
  }
  .boxFlex {
    padding: 0 15px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 0 3px 3px;
    background-color: white;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.1), 0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 3px 14px 2px rgba(0, 0, 0, 0.05);
    width: 100%;
    .left {
      flex: 1;
      :deep(.t-checkbox__label) {
        font-size: 12px;
        font-weight: 400;
        color: rgba(12, 13, 14, 1);
      }
    }
    .right {
      cursor: pointer;
      margin-left: auto;
      font-size: 12px;
      font-weight: 400;
      color: rgba(30, 117, 254, 1);
    }
  }
}
// 下拉框样式 ⬆
.shortLabel {
  margin-right: 0 !important;
}
.shortFrom {
  padding-right: 10px !important;
}
.normalForm {
  padding-right: 0 !important;
}
.footerBox {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  background-color: white;
  width: calc(100% );
}
</style>
